<template>
  <div class="file-search-app">
    <!-- 顶部栏 -->
    <header class="header">
      <div class="header-title">智能文件搜索</div>
      <div class="header-icons">
        <span class="icon">
          <svg width="32" height="32" viewBox="0 0 32 32"><circle cx="14" cy="14" r="8" stroke="#4a5568" stroke-width="2.5" fill="none"/><line x1="21" y1="21" x2="28" y2="28" stroke="#4a5568" stroke-width="2.5" stroke-linecap="round"/></svg>
        </span>
        <span class="icon divider"></span>
        <span class="icon">
          <svg width="32" height="32" viewBox="0 0 32 32"><rect x="5" y="18" width="6" height="7" rx="2" fill="#4a5568"/><rect x="13" y="12" width="6" height="13" rx="2" fill="#4a5568"/><rect x="21" y="8" width="6" height="17" rx="2" fill="#4a5568"/></svg>
        </span>
        <span class="icon divider"></span>
        <span class="icon">
          <svg width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="none" stroke="#4a5568" stroke-width="2.5"/><path d="M16 10v6l4 2" stroke="#4a5568" stroke-width="2.5" fill="none"/></svg>
        </span>
        <span class="icon divider"></span>
        <span class="icon">
          <svg width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="12" r="6" fill="#a0aec0"/><ellipse cx="16" cy="25" rx="10" ry="5" fill="#a0aec0" opacity=".5"/></svg>
        </span>
      </div>
    </header>
    <div class="main-layout">
      <!-- 左侧分类导航 -->
      <aside class="sidebar">
        <div class="sidebar-title">文件分类</div>
        <ul class="category-list">
          <li v-for="cat in categories" :key="cat.name" :class="{active: cat.name === activeCategory}" @click="activeCategory = cat.name">
            <span class="cat-icon" v-html="cat.icon"></span>
            <span>{{ cat.label }}</span>
          </li>
        </ul>
      </aside>
      <!-- 右侧主内容 -->
      <section class="content">
        <!-- 上传区域 -->
        <div class="upload-area" :class="{dragover: isDragOver}" @dragover.prevent="isDragOver = true" @dragleave.prevent="isDragOver = false" @drop.prevent="onDrop">
          <div class="upload-icon">
            <svg width="48" height="48" viewBox="0 0 48 48"><path fill="#409eff" d="M24 6l-8 8h5v8h6v-8h5z"/><rect x="10" y="32" width="28" height="8" rx="2" fill="#e6f7ff"/><rect x="14" y="36" width="20" height="2" rx="1" fill="#b3e5fc"/></svg>
          </div>
          <div class="upload-tip">拖拽文件到此处或点击上传</div>
          <div class="upload-desc">支持图片、PDF、文档、表格、音频等文件格式</div>
          <input type="file" multiple class="upload-input" @change="onFileChange" />
          <button class="upload-btn" @click="triggerFileInput">选择文件</button>
        </div>
        <!-- 文件表格 -->
        <div class="file-table-card">
          <table class="file-table">
            <thead>
              <tr>
                <th style="width:40px;"><input type="checkbox" v-model="allChecked" @change="toggleAll" /></th>
                <th>文件名</th>
                <th>大小</th>
                <th>类型</th>
                <th>上传时间</th>
                <th>权限</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="file in filteredFiles" :key="file.id">
                <td><input type="checkbox" v-model="file.checked" /></td>
                <td>
                  <span class="file-icon" v-html="fileIcon(file)"></span>
                  <span :class="'file-name ' + file.typeClass">{{ file.name }}</span>
                </td>
                <td>{{ file.size }}</td>
                <td>{{ file.mime }}</td>
                <td>{{ file.time }}</td>
                <td>
                  <span :class="['tag', file.permission === '私有' ? 'tag-private' : 'tag-public']">{{ file.permission }}</span>
                </td>
                <td>
                  <button class="delete-btn" @click="deleteFile(file.id)">
                    <svg width="16" height="16" viewBox="0 0 16 16"><path fill="#f56c6c" d="M6 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v1h4v2H2V3h4V2Zm2 1V2H8v1h2Zm-5 3h10l-.8 9.2A2 2 0 0 1 10.2 16H5.8a2 2 0 0 1-1.98-1.8L3 6Z"/></svg>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const categories = [
  { name: 'all', label: '全部文件', icon: '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#409eff"/></svg>' },
  { name: 'image', label: '图片', icon: '<svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="7" fill="#67c23a"/></svg>' },
  { name: 'pdf', label: 'PDF', icon: '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#f56c6c"/></svg>' },
  { name: 'doc', label: '文档', icon: '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#409eff"/></svg>' },
  { name: 'xls', label: '表格', icon: '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#67c23a"/></svg>' },
  { name: 'audio', label: '音频', icon: '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#a259ec"/></svg>' },
]
const activeCategory = ref('all')
const isDragOver = ref(false)
const allChecked = ref(false)
const fileInput = ref(null)

const files = ref([
  { id: 1, name: '项目计划书.docx', size: '2.3 MB', mime: 'VND.OPENXMLFORMATS-OFFICEDOCUMENT.WORDPROCESSINGML.DOCUMENT', time: '2025-06-28 10:30', permission: '私有', type: 'doc', typeClass: 'doc', checked: false },
  { id: 2, name: '财务报表.xlsx', size: '3.5 MB', mime: 'VND.OPENXMLFORMATS-OFFICEDOCUMENT.SPREADSHEETML.SHEET', time: '2025-06-27 14:15', permission: '共享', type: 'xls', typeClass: 'xls', checked: false },
  { id: 3, name: '产品展示.pdf', size: '5.0 MB', mime: 'PDF', time: '2025-06-25 09:45', permission: '共享', type: 'pdf', typeClass: 'pdf', checked: false },
])

const filteredFiles = computed(() => {
  if (activeCategory.value === 'all') return files.value
  return files.value.filter(f => f.type === activeCategory.value)
})

function fileIcon(file) {
  if (file.type === 'doc') {
    return '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#409eff"/></svg>'
  } else if (file.type === 'xls') {
    return '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#67c23a"/></svg>'
  } else if (file.type === 'pdf') {
    return '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#f56c6c"/></svg>'
  } else if (file.type === 'image') {
    return '<svg width="18" height="18" viewBox="0 0 18 18"><circle cx="9" cy="9" r="7" fill="#67c23a"/></svg>'
  } else if (file.type === 'audio') {
    return '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#a259ec"/></svg>'
  }
  return '<svg width="18" height="18" viewBox="0 0 18 18"><rect x="3" y="3" width="12" height="12" rx="2" fill="#dcdfe6"/></svg>'
}

function triggerFileInput() {
  document.querySelector('.upload-input').click()
}
function onFileChange(e) {
  // 这里只做前端演示
  alert('已选择文件：' + Array.from(e.target.files).map(f => f.name).join(', '))
}
function onDrop(e) {
  isDragOver.value = false
  // 这里只做前端演示
  alert('已拖拽文件：' + Array.from(e.dataTransfer.files).map(f => f.name).join(', '))
}
function deleteFile(id) {
  files.value = files.value.filter(f => f.id !== id)
}
function toggleAll() {
  filteredFiles.value.forEach(f => f.checked = allChecked.value)
}
</script>

<style scoped>
.file-search-app {
  width: 100vw;;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #f6f8fa 0%, #e3e9f6 100%);
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0 0 0 20px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 4px 24px 0 rgba(64,158,255,0.08);
  min-height: 60px;
}
.header-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(64,158,255,0.15);
  display: flex;
  align-items: center;
  height: 100%;
}
.header-icons {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 20px 0 0;
}
.icon {
  color: #4a5568;
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
  font-size: 2rem;
  display: flex;
  align-items: center;
}
.icon svg {
  width: 32px;
  height: 32px;
}
.icon.divider {
  width: 2px;
  height: 28px;
  background: #d0e4ff;
  border-radius: 1px;
  margin: 0 10px;
  display: inline-block;
}
.icon:hover {
  color: #409eff;
  transform: scale(1.15);
}
.main-layout {
  display: flex;
  width: 100%;
  height: calc(100vh - 90px);
  margin: 0 10px 0 10px;
  padding: 0;
  box-sizing: border-box;
  gap: 10px;
}
.sidebar, .content {
  height: 100%;
}
.sidebar {
  width: 220px;
  min-width: 120px;
  background: #fff;
  margin: 0;
  padding: 32px 0 32px 24px;
  box-sizing: border-box;
  border-radius: 24px;
  box-shadow: 0 2px 16px 0 rgba(64,158,255,0.06);
}
.sidebar-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 22px;
  color: #222;
  letter-spacing: 1px;
}
.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.category-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  color: #606266;
  margin-bottom: 8px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  font-size: 1.08rem;
}
.category-list li.active, .category-list li:hover {
  background: linear-gradient(90deg, #e6f7ff 0%, #f0faff 100%);
  color: #409eff;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.08);
}
.cat-icon {
  display: flex;
  align-items: center;
}
.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  gap: 10px;
}
.upload-area {
  background: #fff;
  border: 2.5px dashed #b3d8ff;
  border-radius: 18px;
  padding: 3vw 0 2.5vw 0;
  text-align: center;
  margin: 0 20px 0 0;
  position: relative;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 16px 0 rgba(64,158,255,0.07);
}
.upload-area.dragover {
  border-color: #409eff;
  background: #f0faff;
  box-shadow: 0 4px 24px 0 rgba(64,158,255,0.13);
}
.upload-icon {
  margin-bottom: 16px;
}
.upload-tip {
  font-size: 1.25rem;
  color: #409eff;
  margin-bottom: 8px;
  font-weight: 500;
}
.upload-desc {
  color: #909399;
  font-size: 1.05rem;
  margin-bottom: 18px;
}
.upload-input {
  display: none;
}
.upload-btn {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 32px;
  font-size: 1.08rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  margin-top: 10px;
  font-weight: 500;
  box-shadow: 0 2px 8px 0 rgba(64,158,255,0.10);
}
.upload-btn:hover {
  background: linear-gradient(90deg, #66b1ff 0%, #409eff 100%);
  box-shadow: 0 4px 16px 0 rgba(64,158,255,0.18);
  transform: translateY(-2px) scale(1.04);
}
.file-table-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px 0 rgba(64,158,255,0.10);
  padding: 0;
  margin: 0 20px 0 0;
  overflow-x: auto;
}
.file-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.08rem;
}
.file-table th, .file-table td {
  padding: 14px 10px;
  text-align: left;
  font-size: 1.08rem;
}
.file-table th {
  color: #7a8ba7;
  font-weight: 600;
  background: #f6f8fa;
  letter-spacing: 1px;
}
.file-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.2s;
}
.file-table tbody tr:hover {
  background: #f5faff;
}
.file-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.file-name {
  vertical-align: middle;
  font-weight: 500;
}
.file-name.doc { color: #409eff; }
.file-name.xls { color: #67c23a; }
.file-name.pdf { color: #f56c6c; }
.file-name.image { color: #67c23a; }
.file-name.audio { color: #a259ec; }
.tag {
  display: inline-block;
  padding: 3px 14px;
  border-radius: 12px;
  font-size: 1.02rem;
  color: #fff;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: 0 1px 4px 0 rgba(64,158,255,0.10);
}
.tag-private {
  background: linear-gradient(90deg, #f56c6c 0%, #f89c9c 100%);
}
.tag-public {
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
}
.delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 6px;
  transition: background 0.2s, transform 0.2s;
}
.delete-btn:hover {
  background: #fef0f0;
  transform: scale(1.08);
}

/* 响应式适配 */
@media (max-width: 900px) {
  .main-layout {
    flex-direction: column;
    gap: 0;
  }
  .sidebar {
    width: 100%;
    min-width: 0;
    margin-bottom: 18px;
    padding-left: 0;
    padding-right: 0;
    border-radius: 18px;
  }
  .content {
    width: 100%;
    padding: 0;
  }
  .header, .main-layout {
    width: 100%;
    max-width: 100vw;
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 600px) {
  .header-title {
    font-size: 1.3rem;
  }
  .sidebar-title {
    font-size: 1.05rem;
  }
  .upload-area {
    padding: 18px 0 12px 0;
  }
  .file-table {
    min-width: 500px;
    font-size: 0.98rem;
  }
  .file-table th, .file-table td {
    font-size: 0.98rem;
    padding: 8px 4px;
  }
  .upload-btn {
    padding: 7px 14px;
    font-size: 0.98rem;
  }
  .header {
    padding: 18px 8px 0 8px;
  }
  .content {
    padding: 0;
  }
}
</style>